<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--引入react的核心库-->
<script src="../script/react.development.js"></script>
<!--引入react的DOM库-->
<script src="../script/react-dom.development.js"></script>
<body>
    <div id="root"></div>
</body>
<script>
    // 通过核心库里面的React 向页面添加一个div
    
    /**
     * React.createElement()
     *      - 用来创建一个React 元素
     *      - 参数：
     *          1. 元素名（组件名）
     *          2. 元素的属性
     *          3. 元素的子元素（内容）
    */
    const cre_div = React.createElement('div', {}, '我是React创建的div')
    // 获取根元素对象的 React元素
    // ReactDom.createRoot() 用来创建React 根元素，需要一个DOM 元素作为参数
    const root = ReactDOM.createRoot(document.getElementById('root'))
    // 将 React 创建的 dom 元素，渲染到根元素内
    root.render(cre_div)

</script>
    
</html>